<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="/static/Js/jQuery-3.5.1.js"></script>
  <script type="text/javascript" src="/static/Js/bootstrap/popper.js"></script>
  <script type="text/javascript" src="/static/Js/bootstrap/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="/static/Js/bootstrap/bootstrap.min.js"></script>
  <script type="text/javascript" src="/static/Js/LocalDateUtil.js"></script>
  <script type="text/javascript" src="/static/Js/GetUserParam.js"></script>
  <script type="text/javascript" src="/static/Js/WebSocket.js"></script>

  <link rel="stylesheet" href="/static/Css/bootstrap.min.css">
  <style>


    #canva_icon_nav_bar{
      border-radius: 100px;
      width: 50px;
      height: 50px;
      margin-top: -10px;
    }
    #canva_icon_sid_bar{
      border-radius: 100px;
      width: 150px;
      height: 150px;
      margin-top: -10px;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sidebar {
      position: fixed;
      bottom: 0;
      flex-direction: column;
      border-right: 1px solid rgba(0,0,0,.2);
      height: 100%;
      background-clip: padding-box;
      width: 400px;
      left: -400px;
      background-color: rgba(255,255,255,.5);
      z-index: 1045;
      transition: transform .3s ease-in-out;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border-bottom-right-radius: 25px;
      border-top-right-radius: 25px;
      box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.2);
    }
    #navbar_h{
      box-shadow:0px 15px 10px -15px rgba(255,255,255,.2);
      background-color: rgba(255,255,255,.7) !important;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;

    }
    #line{
      display: inline-block;
      width: 100%;
      border-top: 1px solid rgba(255,255,255,.7) ;
    }
    #navbar_h_box{
      height: 66px;

    }
    .importantNewsMessageEntity {
      position: absolute;
      margin-left: 50%;
      transform: translate(-50%);
      margin-top: 5px;
      background-color: orange;

      border-radius: 50px;
      border: white 2px solid;
    }
    .importantNewsMessageEntityText {
      white-space: nowrap;
      position: relative;
      padding-left: 10px;
      padding-right: 10px;
      transform: translate(-50%);
      color: white;
      font-size: x-large;
      font-weight: bold;
    }



  </style>
</head>
<body>
<div id="ToastsPage">
</div>
<header>
<div id="navbar_h_box">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar_h">
  <div class="container-fluid">
    <a class="navbar-brand" href="/index.html"><img src="/static/Img/PageImg/Canva.png" id="canva_icon_nav_bar"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/index.html">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" id="menu_nav_bar" data-bs-toggle="offcanvas" onclick="sideBar()" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">菜单</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/logout">退出登录</a>
        </li>
        <span class="importantNewsMessageEntity" id="importantNewsMessageEntity" hidden>
          <span class="importantNewsMessageEntityText" id="importantNewsMessageEntityText"></span>
        </span>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <img src="/static/Img/PageImg/msg.png" onclick="messageCenter()" width="40px" height="40px"><span style="margin-top: -20px;font-size: 10px;background-color: #fa5a57 ;color: white  ;font-family: 'Microsoft YaHei UI',serif" class="badge badge-light" id="messageCount" ></span>
      </form>
    </div>
  </div>
</nav>
</div>
</header>
<!--侧边栏菜单-->

  <div id="sidebar" style="z-index: 99999">
    <div class="container">
      <div class="row">
        <div class="col-sm">
          <div class="offcanvas-header">
            <a class="navbar-brand" href="/index.html"><img src="/static/Img/PageImg/Canva.png" id="canva_icon_sid_bar"></a>
          </div>
        </div>
        <div class="col-sm">
          <div class="offcanvas-header" style="margin-top: 50px">
          <h7 id="sid_greet_username"></h7><br><h7 id="sid_greet"></h7>
          </div>
        </div>
        <div class="col-sm">
          <div class="offcanvas-header">
            <button type="button" class="close" data-dismiss="modal" id="menu_bar_close" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
          <div class="offcanvas-header" style="margin-top: -30px">
            <h7>现在是:</h7><br><h7 id="localDate_01"></h7>

          </div>
        </div>
      </div>
      <span id="line"></span>
      <div class="row">
        <div class="col-sm">
          <div class="offcanvas-header">


          </div>
        </div>
      </div>
    </div>



  <script>
    //isHiden只是返回部件的隐藏属性，并不能表示部件当前的真实状态。
    isHiden = true;
    $("#menu_nav_bar,#menu_bar_close").click(function () {
      if (isHiden) {
        $('#sidebar').animate({ left: '0' }).show();//菜单块向右移动
      } else {
        $('#sidebar').animate({ left: '-400px' }); //菜单块向左移动
      }
      isHiden = !isHiden;
    })
  </script>
</div>

<script>
  (function () {
    VerifyLogin()
  }(window))
  function sideBar() {
    $("#slide-right").css("width","400px")
    userParam();
  }

  function messageCenter(){
    window.location.href = "/templates/MessageCenter.html"
  }



</script>
</body>
</html>